<template>
  <div id="popup" class="popup" v-if="popupData.popupShow">
    <!-- 类型说明 -1不要头部 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像 -->
    <!-- 注意：需要的字段就添加 -->
    <!-- content内容字体默认颜色为灰色#999999 -->
    <slot name="popupCustomize"></slot>
    <div class="popup-div" :class="popupData.app_notic ? 'notic':''" v-if="!popupData.popupDiv">
      <!-- 头部突出样式 -->
      <div class="popup-icon-div" v-if="popupData.type != -1">
        <!-- 是否显示头像 -->
        <img v-if="popupData.imgSrc" class="icon-img" :src="popupData.imgSrc"/>
        <!-- 根据类型显示iconfoot和svg -->
        <i :class="'icon-isvg-' + popupData.type">
          <svg aria-hidden="true"><use xlink:href="#iconicon-test"></use></svg>
        </i>
        <!-- 根据类型显示颜色 -->
        <div :class="'popup-circle-' + popupData.type"></div>
        <!-- 根据类型显示图标 -->
        <div :class="'popup-icon-' + popupData.type"></div>
      </div>
      <!-- 中间内容 -->
      <slot v-if="popupData.search" name="search"></slot>
      <slot v-if="popupData.app_notic" name="app_notic"></slot>
      <slot v-if="popupData.invite_box" name="invite_box"></slot>
      <div v-if="!popupData.search && !popupData.app_notic && !popupData.invite_box" class="popup-txt" :class="popupData.type == -1 ? 'popup-txt-noicon':''">
        <div class="txt-title" v-if="popupData.title">{{ popupData.title }}</div>
        <!-- 二维码预留 -->
        <slot name="qrcode"></slot>
        <!-- 适配标题下方的内容文字 -->
        <div class="txt-centent-up" v-if="popupData.bgContentUpTxt" v-html="popupData.bgContentUpTxt"></div>
        <div class="content-bg" :class="popupData.content ? '' : 'content-bg-height'" v-if="popupData.bgContent" v-html="popupData.bgContent"></div>
        <!-- 金钱特殊样式区分 -->
        <div class="txt-money" v-if="popupData.type == 2">
          <p v-html="popupData.content.content"></p>
          +
          <span>{{ popupData.content.money }}</span>
          {{ popupData.content.unit }}
        </div>
        <div v-else-if="popupData.content" class="txt-centent" v-html="popupData.content"></div>
        <!-- 自定义样式 -->
        <slot name="customize"></slot>
      </div>
      <!-- 显示单个按钮 -->
      <div class="popup-btn" v-if="!popupData.btnTextRight">
        <button class="btn-left btn-color" v-if="popupData.type == 2" @click="popupClickLeft">{{ popupData.btnTextLeft }}</button>
        <button v-else-if="popupData.btnTextLeft" class="btn-left" @click="popupClickLeft">{{ popupData.btnTextLeft }}</button>
      </div>
      <!-- 显示两个按钮 -->
      <div class="popup-btn2" v-else>
        <button class="btn-left" @click="popupClickLeft">{{ popupData.btnTextLeft }}</button>
        <button class="btn-right" @click="popupClickRight">{{ popupData.btnTextRight }}</button>
      </div>
      <!-- 关闭按钮 -->
      <div class="popup-icon-close" v-if="!popupData.closeShow" @click="close"></div>
      <slot name="hasVip"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    popupData: Object,
    popupClickLeft: {
      type: Function,
      default: () => {}
    },
    popupClickRight: {
      type: Function,
      default: () => {}
    },
  },
  data() {
    return {
      globalPopuData:''
    };
  },
  created() {
    if(this.globalPopuData != '') {
      this.popupData = this.globalPopuData;
      this.popupClickLeft = this.globalPopuData.popupClickLeft;
      this.popupClickRight = this.globalPopuData.popupClickRight;
    }
  },

  mounted() {
    // let child = document.getElementById("popup");
    // document.body.appendChild(child);
  },
  updated() {
    let child = document.getElementById("popup");
    if(this.popupData.upOnBody && child){
      document.body.appendChild(child);
    }
    if (document.getElementById("popup") == null) {
      if(this.popupData.popupShow) {
        let child = document.getElementById("popup");
        document.body.appendChild(child);
      }
    }
  },
  methods: {
    close() {
      if(this.globalPopuData == '') {
        this.$emit('close', false);
      } else {
        this.globalPopuData.clickClose();
      }
    },
  },
  destroyed() {
    let child = document.getElementById("popup");
    if(this.popupData.upOnBody && child){ //表示要放到body
      document.getElementById("popup").remove();
    }
    this.popupData.popupShow = false;
  }
};
</script>

<style lang="less" scoped>
@import '~@/less/mix';
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_1374241_z40jvugray.woff') format('woff'),
}
.popup {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  .popup-customize {
    position: fixed;
    border-radius: 8px;
    min-height: 206px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -10%;
    &.show {
      animation: popupanimi 0.25s;
    }
  }
  .popup-div {
    position: fixed;
    width: 290px;
    border-radius: 8px;
    min-height: 206px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -10%;
    animation: popupanimi 0.25s;
    &.notic {
      justify-content: space-around;
      min-height: auto;
    }
    
    .popup-icon-div {
      position: absolute;
      top: -60px;
      width: 120px;
      height: 120px;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon-img {
        position: absolute;
        width: 72px;
        height: 72px;
        border-radius: 50%;
      }
      
      .icon-isvg-11,
      .icon-isvg-3,
      .icon-isvg-2,
      .icon-isvg-1,
      .icon-isvg-0 {
        width: 120px;
        height: 120px;
        svg {
          width: 120px;
          height: 120px;
        }
      }
       // -1不要头部 0错误  1正确 2金钱 3感叹号 4收藏 5vip 6二维码 7微信 8通知 9分享 10邀请方式 11头像 14升级 15 搜索
      .icon-isvg-5,
      .icon-isvg-14,
      .icon-isvg-15,
      .icon-isvg-8,
      .icon-isvg-9,
      .icon-isvg-4 {
        width: 120px;
        height: 120px;
        svg {
          display: none;
        }
        &:before {
          content: '\e654';
          font-size: 120px;
          color: #FFAC13;
        }
      }
      .icon-isvg-6{
        width: 120px;
        height: 120px;
        svg {
          display: none;
        }
        &:before {
          content: '\e654';
          font-size: 120px;
          color: #FFF12A;
        }
      }
      .icon-isvg-7{
        width: 120px;
        height: 120px;
        svg {
          display: none;
        }
        &:before {
          content: '\e654';
          font-size: 120px;
          color: #10D789;
        }
      }
      .icon-isvg-10{
        width: 120px;
        height: 120px;
        svg {
          display: none;
        }
        &:before {
          content: '\e654';
          font-size: 120px;
          color: #4DA0FF;
        }
      }
      .icon-isvg-12{
        width: 120px;
        height: 120px;
        svg {
          display: none;
        }
        &:before {
          content: '\e654';
          font-size: 120px;
          color: #1093D7;
        }
      }
      .popup-circle-2,
      .popup-circle-0 {
        position: absolute;
        width: 72px;
        height: 72px;
        background: linear-gradient(180deg, rgba(255, 136, 136, 1) 0%, rgba(251, 82, 82, 1) 100%);
        box-shadow: 0px 10px 10px rgba(255, 57, 6, 0.24);
        border-radius: 50%;
      }
      .popup-circle-1 {
        position: absolute;
        width: 72px;
        height: 72px;
        background: linear-gradient(180deg, rgba(0, 255, 161, 1) 0%, rgba(16, 215, 137, 1) 100%);
        box-shadow: 0px 10px 10px rgba(6, 255, 56, 0.27);
        border-radius: 50%;
      }

      .popup-circle-3 {
        position: absolute;
        width: 72px;
        height: 72px;
        background: linear-gradient(180deg, rgba(107, 216, 255, 1) 0%, rgba(8, 168, 255, 1) 100%);
        box-shadow: 0px 10px 10px rgba(6, 187, 255, 0.24);
        border-radius: 50%;
      }

      .popup-circle-9,
      .popup-circle-8,
      .popup-circle-5,
      .popup-circle-15,
      .popup-circle-14,
      .popup-circle-4 {
        position: absolute;
        width: 72px;
        height: 72px;
        background: linear-gradient(180deg, rgba(255, 163, 38, 1) 0%, rgba(255, 98, 39, 1) 100%);
        box-shadow:0px 10px 10px rgba(255,172,19,0.28);
        border-radius: 50%;
      }
      .popup-circle-6 {
        position: absolute;
        width: 72px;
        height: 72px;
        background: linear-gradient(180deg, rgba(255, 230, 2, 1) 0%, rgba(255, 172, 19, 1) 100%);
        box-shadow: 0px 10px 10px rgba(215, 195, 16, 0.26);
        border-radius: 50%;
      }

      .popup-circle-7 {
        position: absolute;
        width: 72px;
        height: 72px;
        background: linear-gradient(180deg, rgba(0, 255, 161, 1) 0%, rgba(16, 215, 137, 1) 100%);
        box-shadow: 0px 10px 10px rgba(16, 215, 137, 0.26);
        border-radius: 50%;
      }
      .popup-circle-10 {
        position: absolute;
        width: 72px;
        height: 72px;
        box-shadow: 0px 10px 10px rgba(77, 160, 255, 0.28);
        border-radius: 50%;
      }
      .popup-circle-11 {
        position: absolute;
        width: 72px;
        height: 72px;
        box-shadow:0px 10px 10px rgba(110,110,110,0.17);
        border-radius: 50%;
      }
      .popup-circle-12 {
        position: absolute;
        width: 72px;
        height: 72px;
        box-shadow:0px 10px 10px rgba(16,147,215,0.26);
        background:linear-gradient(180deg,rgba(107,216,255,1) 0%,rgba(8,168,255,1) 100%);
        border-radius: 50%;
      }
      .popup-icon-0 {
        position: absolute;
        &:before {
          content: '\e657';
          font-size: 72px;
          color: #ffffff;
        }
      }
      .popup-icon-1 {
        position: absolute;
        &:before {
          content: '\e659';
          font-size: 72px;
          color: #ffffff;
        }
      }
      .popup-icon-2 {
        position: absolute;
        &:before {
          content: '\e658';
          font-size: 72px;
          color: #ffffff;
        }
      }
      .popup-icon-15 {
        position: absolute;
        &:before {
          content: '\e666';
          font-size: 72px;
          color: #ffffff;
        }
      }
      .popup-icon-3 {
        position: absolute;
        &:before {
          content: '\e655';
          font-size: 72px;
          color: #ffffff;
        }
      }
      .popup-icon-4 {
        position: absolute;
        &:before {
          content: '\e656';
          font-size: 72px;
          color: #ffffff;
        }
      }
      .popup-icon-5 {
        position: absolute;
        &:before {
          content: '\e65c';
          font-size: 72px;
          color: #ffffff;
        }
      }
      .popup-icon-14 {
        position: absolute;
        &:before {
          content: '\e660';
          font-size: 72px;
          color: #ffffff;
        }
      }

      .popup-icon-6 {
        position: absolute;
        &:before {
          content: '\e65e';
          font-size: 72px;
          color: #ffffff;
        }
      }
      .popup-icon-7 {
        position: absolute;
        &:before {
          content: '\e65d';
          font-size: 72px;
          color: #ffffff;
        }
      }
      .popup-icon-8 {
        position: absolute;
        &:before {
          content: '\e65a';
          font-size: 72px;
          color: #ffffff;
        }
      }
      .popup-icon-9 {
        position: absolute;
        &:before {
          content: '\e65b';
          font-size: 72px;
          color: #ffffff;
        }
      }
      .popup-icon-12 {
        position: absolute;
        &:before {
          content: '\e631';
          font-size: 72px;
          color: #ffffff;
          line-height: 1;
        }
      }
    }
  }
  .popup-txt-noicon {
    margin-top: 19px !important;
    min-height: 159px !important;
  }
  .popup-txt {
    text-align: center;
    width: 100%;
    margin-top: 61px;
    min-height: 68px;
    .txt-title {
      font-size: 16px;
      color: #333333;
    }
    .txt-centent {
      margin-top: 10px;
      margin-bottom: 23px;
      font-size: 13px;
      color: #999999;
      min-height: 32px;
      line-height: 15px;
      padding: 0px 15px;
    }
    .txt-centent-up {
      padding-bottom: 25px;
      margin-bottom: 0;
      margin-top: 5px;
      font-size: 14px;
      min-height: 16px;
      color: #999999;
    }
    .content-bg {
      box-sizing: border-box;
      padding: 12px 12px 12px 12px;
      width: 250px;
      font-size: 13px;
      margin: 0px 20px;
      margin-bottom: 12px;
      border-radius: 6px;
      background: #f6f6f6;
      display: flex;
      text-align: left;
      word-wrap: break-word;
      word-break: break-all;
      border: 1px dashed #ccc;
    }
    .content-bg-height {
      margin-bottom: 23px;
    }
    .txt-money {
      margin-top: 10px;
      margin-bottom: 13px;
      font-size: 13px;
      color: #999999;
      color: #FB5252;
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0 19px;
      }
      span {
        font-size: 32px;
      }
    }
  }
  .popup-btn {
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 20px;
    .btn-left {
      width: 180px;
      height: 40px;
      background: linear-gradient(91deg, rgba(255, 163, 38, 1) 0%, rgba(255, 98, 39, 1) 100%);
      border-radius: 100px;
      .setBtnOpacity();
    }
    .btn-color {
      background: linear-gradient(91deg, rgba(255, 136, 136, 1) 0%, rgba(251, 82, 82, 1) 100%);
    }
  }
  .popup-btn2 {
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 20px;
    .btn-left {
      width: 115px;
      height: 40px;
      background:linear-gradient(91deg,rgba(107,216,255,1) 0%,rgba(8,168,255,1) 100%);
      border-radius: 100px;
      margin-right: 20px;
      .setBtnOpacity();
    }
    .btn-right {
      width: 115px;
      height: 40px;
      background:linear-gradient(91deg,rgba(255,163,38,1) 0%,rgba(255,98,39,1) 100%);
      border-radius: 100px;
      .setBtnOpacity();
    }
  }
  .popup-icon-close {
    position: absolute;
    bottom: -50px;
    border-radius: 50%;
    &:before {
      content: '\e602';
      font-size: 30px;
      color: #ffffff;
    }
  }
}
@keyframes popupanimi {
  0% {
    transform: scale(0); /*开始为原始大小*/
  }
  100% {
    transform: scale(1);
  }
}

.task_fast {
  position: relative;
  box-sizing: border-box;
  width: 290px;
  border-radius: 8px;
  margin-top: -10%;
  &.show {
    animation: popupanimi 0.25s;
  }
  .bg_top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 145px;
    .bgSrc('//resource.youyizhuan.cn/Resource/app/image/home/pop_quick task_1.png');
    .popup-icon-div {
      position: absolute;
      top: -60px;
      width: 120px;
      height: 120px;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon-img {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        border: 1px solid #fff;
      }
    }
    > .name {
      color: #fff;
      font-size: 15px;
    }
    .money {
      margin-top: 3px;
      color: #FFF12A;
      font-size: 14px;
      span {
        font-size: 32px;
      }
    }
  }
  .top {
    transform: translateY(-1px);
    box-sizing: border-box;
    padding: 0 15px;
    background: #fff;
    width: 100%;
    padding-bottom: 20px;
    .item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 9px;
      &:nth-last-child(1) {
        margin-bottom: 0px;
      }
      .tag {
        flex-shrink: 0;
        text-align: center;
        width: 36px;
        height: 16px;
        font-size: 11px;
        color: #fff;
        border-radius:0px 5px 0px 5px;
        background-color: #FFAC13;
        margin-right: 8px;
        &.bl {
          background-color: #4DA0FF;
        }
      }
      .task_name {
        width: 154px;
        flex-basis: 154px;
        font-size: 12px;
        color: #999;
        text-align: left;
      }
      .task_money {
        flex-shrink: 0;
        color: #FF632A;
        font-size: 12px;
      }
    }
  }
  .bottom {
    transform: translateY(-2px);
    box-sizing: border-box;
    padding: 0 15px;
    background: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-top: 1px dotted #FF632A;
    padding-top: 15px;
    padding-bottom: 15px;
    .useable {
      color: #999;
    }
    .able_money {
      color: #FF632A;
    }
  }
  .btn {
    transform: translateY(-3px);
    box-sizing: border-box;
    padding: 2px 15px;
    background: #fff;
    display: flex;
    justify-content: center;
  }
  .bg_bottom {
    transform: translateY(-4px);
    height: 40px;
    .bgSrc('//resource.youyizhuan.cn/Resource/app/image/home/pop_quick task_2.png');
  }
  .change_task {
    width:88px;
    height:40px;
    color: #fff;
    margin-right: 12px;
    font-size: 14px;
    background:linear-gradient(91deg,rgba(107,216,255,1) 0%,rgba(8,168,255,1) 100%);
    border-radius:100px;
  }
  .go_details {
    width:134px;
    height:40px;
    color: #fff;
    font-size: 14px;
    background:linear-gradient(91deg,rgba(255,163,38,1) 0%,rgba(255,98,39,1) 100%);
    border-radius:100px;
  }
  .vest {
    position: absolute;
    bottom: -32px;
    font-size: 12px;
    color: #fff;
    .reward {
      color: #FF632A;
    }
    .name {
      font-size: 12px;
      margin-right: 10px;
    }
    img {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 6px;
    }
  }
  .popup-icon-close {
    left: calc(50% - 15px);
  }
}
</style>
